import React, { useEffect, useState } from 'react';
import { useHistory, useParams } from 'react-router-dom';
import style from './style.less';

const SonglistItem = ()=>{

    const {keywords} = useParams();
    const [data, setData] = useState(null);
    const requestType = 1000;
    const history = useHistory();

    useEffect(async ()=>{
        const res = await React.$axios.get(`/search/?keywords=${keywords}&type=${requestType}`);
        console.log(res.data.result);
        const data = res.data.result.playlists;
        setData([...data]);
    },[keywords])

    const handleClick = (e)=>{
        let songlistID = e.target.parentNode.id;
        history.push(`/singlelist/${songlistID}`);
    }

    return (
        <ul className={style.songlistItem}>
            {data && data.map((item,index)=>(
                <li key={index}
                onClick={handleClick}
                id={item.id}>
                    <img src={item.coverImgUrl} alt="" />
                    <span>{item.name}</span>
                </li>
            ))}
        </ul>
    )
}

export default SonglistItem;
